<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /**
         * 防抖函数：首次立即执行，后续在wait毫秒内不再执行，在wait毫秒后执行
         * @param {Function} callback - 要执行的回调函数
         * @param {number} wait - 两次触发之间的最小时间间隔
         * @returns {Function} - 返回一个新的函数，该函数会在最后一次调用后的 wait 毫秒后执行 callback
         */
        function debounce(callback, wait) {
            let timeout; // 存储定时器的变量
            return function (...args) {
                const context = this; // 保存当前的 this 上下文
                clearTimeout(timeout); // 清除之前的定时器
                // 设置新的定时器，在 wait 毫秒后执行 callback
                timeout = setTimeout(function () {
                    callback.apply(context, args);
                }, wait);
            };
        }

        // 示例：窗口调整大小时，只在停止调整大小0.5秒后执行一次处理函数
        window.addEventListener('resize', debounce(function () {
            console.log('Window resized');
        }, 500));

        /**
         * 节流函数：在给定的时间间隔内，最多允许一次函数执行
         * @param {Function} func - 要执行的函数
         * @param {number} wait - 两次执行之间的最小间隔时间（以毫秒为单位）
         * @returns {Function} - 返回一个新的函数，该函数会在每隔 wait 毫秒最多执行一次 func
         */
        function throttle(callback, wait) {
            let lastTime = 0; // 记录上一次执行函数的时间
            return function (...args) {
                const now = new Date().getTime(); // 获取当前时间
                // 如果当前时间与上一次执行时间的差值大于等于 wait，则执行 func
                if (now - lastTime >= wait) {
                    callback.apply(this, args); // 执行callback，并传递参数
                    lastTime = now; // 更新上一次执行时间
                }
            };
        }

        // 示例：滚动事件中，每500毫秒执行一次处理函数
        window.addEventListener('scroll', throttle(function () {
            console.log('Scrolling');
        }, 500));
    </script>
</body>

</html>